<template>
	<view class="container">
		<!-- 顶部固定区 -->
		<view class="fixed-view">
			<!-- top -->
			<view class="page-top">
				<image class="user-img" mode="aspectFill" :src="user_img" @error="setDefImg"></image>
			</view>
		</view>
		<!-- 内容区 -->
		<scroll-view class="content-view-scroll" scroll-y>
			<!-- 功能列表 -->
			<view class="page-content">
				<view class="content-item" @click="goCashLog">
					<view class="content-item-left">
						<!-- <uni-icons custom-prefix="ali-iconfont" type="ali-day-log" size="22"></uni-icons> -->
						<image class="item-icon" mode="aspectFit" src="/static/image/day-log.png"></image>
						<text class="text-left">交易记录</text>
					</view>
					<view class="content-item-right">
						<text class="text-right"></text>
						<uni-icons type="right" size="16"></uni-icons>
					</view>
				</view>
				<view class="content-item" @click="goCashLogMonth">
					<view class="content-item-left">
						<image class="item-icon" mode="aspectFit" src="/static/image/month-log.png"></image>
						<text class="text-left">月账单</text>
					</view>
					<view class="content-item-right">
						<text class="text-right"></text>
						<uni-icons type="right" size="16"></uni-icons>
					</view>
				</view>
				<view class="content-item" @click="goCashLogYear">
					<view class="content-item-left">
						<image class="item-icon" mode="aspectFit" src="/static/image/year-log.png"></image>
						<text class="text-left">年账单</text>
					</view>
					<view class="content-item-right">
						<text class="text-right"></text>
						<uni-icons type="right" size="16"></uni-icons>
					</view>
				</view>
				<view class="content-item" @click="goBackupData">
					<view class="content-item-left">
						<image class="item-icon" mode="aspectFit" src="/static/image/backup.png"></image>
						<text class="text-left">备份与还原</text>
					</view>
					<view class="content-item-right">
						<uni-icons type="right" size="16"></uni-icons>
					</view>
				</view>
				<view class="content-item" @click="clertData">
					<view class="content-item-left">
						<image class="item-icon" mode="aspectFit" src="/static/image/delete.png"></image>
						<text class="text-left">清理缓存</text>
					</view>
					<view class="content-item-right">
						<text class="text-right">该操作会删除所有数据</text>
					</view>
				</view>
				<view class="content-item" @click="goAbout">
					<view class="content-item-left">
						<text class="text-left">关于</text>
					</view>
					<view class="content-item-right">
						<text class="text-right"></text>
						<uni-icons type="right" size="16"></uni-icons>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script setup>
	import {
		onUnmounted,
		ref
	} from 'vue'
	import {
		onPullDownRefresh,
		onShow,
	} from '@dcloudio/uni-app'

	const user_img = ref("/static/image/head.png")

	onShow(() => {})

	// 在组件卸载时
	onUnmounted(() => {});

	// 下拉刷新
	onPullDownRefresh(() => {
		console.log('下拉刷新');
		// 执行数据刷新逻辑
		refreshPageData(true)
	});

	// 默认图片
	const setDefImg = () => {
		user_img.value = "/static/image/head.png"
	}

	// 刷新页面数据
	const refreshPageData = (neesStopPullDownRefresh = false) => {
		// 停止下拉刷新动画
		if (neesStopPullDownRefresh) {
			uni.stopPullDownRefresh()
		}
	}

	// 清理缓存
	const clertData = () => {
		// 弹出提示框
		uni.showModal({
			title: '提示',
			content: '确定要删除所有数据吗？',
			cancelText: '不删除了',
			cancelColor: '#ff0000',
			confirmText: '确认',
			cancelColor: '#07c160',
			success: (res) => {
				if (res.confirm) {
					uni.clearStorageSync()
					uni.showToast({
						icon: 'success',
						title: '清理完成'
					})
				} else if (res.cancel) {
					return
				}
			},
		})
	}

	// 前往交易明细
	const goCashLog = () => {
		uni.navigateTo({
			url: '/pages/cash_log_day/cash-log-day'
		})
	}

	// 前往月账单
	const goCashLogMonth = () => {
		uni.navigateTo({
			url: '/pages/cash_log_month/cash-log-month'
		})
	}

	// 前往年账单
	const goCashLogYear = () => {
		uni.navigateTo({
			url: '/pages/cash_log_year/cash-log-year'
		})
	}

	// 前往备份与还原
	const goBackupData = () => {
		uni.navigateTo({
			url: '/pages/backup_data/backup_data'
		})
	}

	// 前往关于
	const goAbout = () => {
		uni.navigateTo({
			url: '/pages/about/about'
		})
	}
</script>

<style lang="scss">
	@import url("me.css");
</style>